<template>
	<view class="main-box">
		<view class="logo-view">
			<view class="tip-view">占位内容</view>
		</view>
		<view class="white-border-box">
			<image class="logo-icon" src="../../../static/apply/apply_logo_icon.png" mode=""></image>
			<view class="right-flex">
				<view class="right-flex-title">填写加盟申请表</view>
				<view class="right-flex-content">收集您的信息，帮助我们更好的合作</view>
				<view class="right-flex-btn" @click="applyClick">去申请</view>
			</view>
		</view>
		<!-- <view class="confirm-btn" @click="applyClick">立即申请</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			applyClick() {
				if (!getApp().globalData.isLogin) {
					uni.navigateTo({
						url: '/pages/loginPage/loginPage'
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/submitApply/submitApply'
				})
			}
		}
	}
</script>

<style lang="scss">
	.main-box{
		position: relative;
		min-height: 100vh;
		.logo-view{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 240px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: $theme-color;
			clip-path: ellipse(100% 50% at 50% 40%);
			.tip-view {
				height: 80px;
				text-align: center;
				font-size: 18px;
			}
		}
		.white-border-box {
			position: absolute;
			left: 16px;
			right: 16px;
			top: 180px;
			z-index: 10;
			background-color: white;
			border-radius: 5px;
			min-height: 100px;
			padding: 16px;
			display: flex;
			gap: 16px;
			.logo-icon {
				width: 50px; 
				height: 50px;
				flex-shrink: 0;
			}
			.right-flex {
				display: flex;
				flex-direction: column;
				color: black;
				flex: 1;
				&-title {
					font-size: 18px;
				}
				&-content {
					margin-top: 4px;
					font-size: 14px;
					color: #999;
				}
				&-btn {
					margin-top: 12px;
					border-radius: 36px;
					height: 36px;
					width: 100px;
					text-align: center;
					line-height: 36px;
					color: white;
					font-size: 15px;
					background-color: $theme-color;
				}
			}
		}
		.confirm-btn {
			height: 40px;
			border-radius: 8px;
			line-height: 40px;
			text-align: center;
			background: linear-gradient(to right, #17c1ff 50%, #007aff 100%);
			color: white;
			font-size: 18px;
			font-weight: bold;
			width: 100%;
		}
	}
	
</style>
